<template>
  <view>
    <view class="diy-header-wrapper" :style="[{ height: pageNavRect.height + 'px' }]">
      <view
        class="header-nav-box"
        :style="{
          height: pageNavRect.height + 'px',
          paddingTop: pageNavRect.top + 'px',
          paddingRight: pageNavRect.sides + 'px',
          background: backgroundColor,
        }"
      >
        <view class="nav-box-lef" :style="{ paddingTop: pageNavRect.top + 'px' }">
          <div class="toback" @click="handleBack">
            <van-icon name="arrow-left" :color="titleColor" />
          </div>
        </view>
        <view class="nav-box-center" :style="{ left: pageNavRect.sides + 'px' }">
          <text v-if="pageName" :style="[{ color: titleColor }]">{{ pageName }}</text>
          <img v-else src="https://image.doulaoban.com/applet/index_logo.png" class="nav-logo" mode="widthFix" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { navigateDlbMini } from '@/utils/index';

  export default {
    name: 'HeaderNavigation',
    props: {
      pageName: {
        type: String,
        default: () => '',
      },
      titleColor: {
        type: String,
        default: () => '#000',
      },
      backgroundColor: {
        type: String,
        default: () => '#fff',
      },
      // 返回按钮是否为退出当前小程序，默认 wx.navigateBack()
      backExitMiniProgram: {
        type: Boolean,
        default: () => false,
      },
    },
    data() {
      return {
        pageNavRect: this.$systemTools.pageNavRect,
      };
    },
    watch: {},
    created() {
      wx.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#ffffff',
      });
    },
    methods: {
      handleBack() {
        if (this.backExitMiniProgram) {
          const isFromOtherApp = wx.getStorageSync('isFromOtherApp');
          if (isFromOtherApp) {
            wx.exitMiniProgram();
          } else {
            navigateDlbMini('/pages/index/main');
          }
        } else {
          wx.navigateBack();
        }
      },
    },
  };
</script>

<style lang="less" scoped>
  .sortpopbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    width: 100%;
    height: 100%;
    background: #fff;
  }

  img {
    display: block;
    width: 17px;
    height: 17px;
    margin-right: 9.5px;
  }

  .add-btn {
    height: 20px;
    padding: 0 8px;
    margin-left: auto;
    font-size: 12px;
    line-height: 20px;
    color: #737e97;
    background: #f5f7fa;
    border-radius: 4px;
  }

  .diy-header-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 3;

    .header-nav-box {
      @navLeftOffect: 15px;

      position: relative;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: @navLeftOffect;
      background: #fff;

      /deep/ .nav-more {
        width: 10px;
        height: 8px;
      }

      .nav-box-lef {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: @navLeftOffect;
      }

      .nav-box-center {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        font-size: 13px;

        .nav-logo {
          width: 50px;
        }
      }
    }
  }

  .toback {
    margin-top: 3px;
    margin-right: 5px;
    font-size: 18px;
    color: #333;
  }
</style>
